import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import avatar from '../assets/back.jpg'
import { getArticleAction } from '../store/actions/article'

export const ArticleList = () => {
  //默认执行一次用副作用钩子函数
  const dispatch = useDispatch()
  //获取当前选中频道ID
  const activeId = useSelector((store) => store.channell.activeId)
  useEffect(() => {
    dispatch(getArticleAction(activeId))
  }, [dispatch, activeId]) //activeId依赖变化会重新执行

  //获取文章列表数据
  const list = useSelector((storee) => storee.article)

  //优化：抽离列表渲染
  const renderList = () => {
    return list.map((item) => (
      <div className="article_item" key={item.art_id}>
        <h3>{item.title}</h3>
        <div className="img_box">
          <img
            src={item.cover.type === 0 ? avatar : item.cover.images[0]}
            className="w100"
            alt=""
          />
        </div>
        <div className="info_box">
          <span>{item.aut_name}</span>
          <span>{item.comm_count}评论</span>
          <span>{item.pubdate}</span>
        </div>
      </div>
    ))
  }

  return (
    <div className="list">
      {renderList()}

      {/* <div className="article_item">
        <h3>python数据预处理 ：数据标准化</h3>
        <div className="img_box">
          <img src={avatar} className="w100" alt="" />
        </div>
        <div className="info_box">
          <span>13552285417</span>
          <span>0评论</span>
          <span>2018-11-29T17:02:09</span>
        </div>
      </div> */}
    </div>
  )
}
